<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app1" @click="click1">
        <h1>{{ message }}</h1>
        <span id="span1" v-bind:title="span_title">
            span标签
        </span>
        <button @click="changeState()">改变状态</button>
        <button v-on:click="changeState">ChangeState</button>
<!--        按钮事件可以有两种方式，v-on:绑定或者通过@click=进行绑定事件。-->
        <p v-if="h1_flag">h1标签</p>
<!--        v-model指令双向绑定-->
        <input v-model="message">
<!--        如果click后面不加入stop，会调用父标签的click1，加入了.stop后会只调用click2-->
        <div @click.stop="click2">
            clickme
        </div>

    </div>

<!--js代码逻辑-->

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let app = new Vue({
            el: '#app1',
            data: {
                message:'hello vue!',
                span_title: '页面加载于 ' + new Date().toLocaleString(),
                h1_flag: false,
            },
            methods: {
                changeState:function(){
                    if(this.h1_flag){
                        // app.h1_flag = false
                        this.h1_flag = false
                    }else{
                        this.h1_flag = true
                    }
                },
                click1:function () {
                    console.log('click1')
                },
                click2:function () {
                    console.log('click2')
                }
            }
        })
    </script>
</body>
</html>